<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Welcome</title>
        <style type="text/css" media="screen">
            @import "resources/css/custom-theme/jquery-ui-1.8.16.custom.css";
            @import "resources/css/screen.css";
            @import "resources/css/app.css";
            /*
             * Override styles needed due to the mix of three different CSS sources! For proper examples
             * please see the themes example in the 'Examples' section of this site
             */
            .dataTables_info { padding-top: 0; }
            .dataTables_paginate { padding-top: 0; }
            .css_right { float: right; }
            #example_wrapper .fg-toolbar { font-size: 0.8em }
            #theme_links span { float: left; padding: 2px 10px; }
        </style>
        <script type="text/javascript" src="resources/js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="resources/js/jquery-ui-1.8.16.custom.min.js"></script>
        <script type="text/javascript" src="resources/js/jquery.dataTables.min.js"></script>
        <style>
            .ui-autocomplete-loading { background: white url('resources/images/ui-anim_basic_16x16.gif') right center no-repeat; }
        </style>
        <script>
            $(document).ready(function() {
               oTable = $('#resultstable').dataTable({
                        "aaSorting": [[ 0, "desc" ]],
                        "iDisplayLength": 25,
                        "bJQueryUI": true,
                        "bFilter": false,
                        "bLengthChange": false,
                        "bInfo": false
                });

                $('#searchbutton').button();


            <c:forEach var="hit" items="${hits}">
                var row = jQuery.parseJSON('${hit}');
                var displayName = row.displayName;
                if(row.text!=undefined) {
                    displayName = displayName + ' ' + row.text;
                }
                var id = row.id.toLowerCase().replace("(","?id=").replace(")","");
                oTable.fnAddData( [
                    '<a href="'+id+'">'+ displayName +'</a>'
                ]);
            </c:forEach>
            } );
        </script>
    </head>
    <body>
    <div id="header-thin">
        <div id="searchbar" class="push-10">
            <jsp:include page="includes/searchbar.jsp" />
        </div>
        <div class="prepend-13 span-1 last">login</div>
    </div>
    <div class="container">
        <div id="containertable" class="span-22 push-1 ui-tabs ui-widget ui-widget-content ui-corner-all">
                    <table id="resultstable">
                        <thead>
                            <tr>
                                <th>Results</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr><td></td></tr>
                        </tbody>
                    </table>
            </div>
            <div class="span-5">
                <img src="http://code.google.com/appengine/images/appengine-noborder-120x30.gif" alt="Powered by Google App Engine" />
            </div>
        </div>
    </body>
</html>
